<script setup>
import { ref, computed, defineProps, defineEmits } from "vue";

const props = defineProps(["model", "meta"]);
const emits = defineEmits(["row-command"])
const { model, meta } = props;


const disabled = computed(() => {
  let rows = model.rows;
  if (rows && rows.length > 0) {
    return false;
  } else {
    return true;
  }
})

const columns = computed(() => {
  if (meta && meta.items) {
    let cols = meta.items.filter(x => {
      return x.visible;
    });
    return cols;
  } else {
    return [];
  }
});

function handleSizeChange(pageSize) {
  // console.log(JSON.stringify(pageSize));
  model.pageSize = pageSize;
}

function handleCurrentChange(pageIndex) {
  // console.log(JSON.stringify(args));
  model.pageIndex = pageIndex;
}

function handleRowCommand(cmd, scope) {
  let args = {
    "command": cmd,
    "data": scope.row,
    "index": scope.$index
  };
  emits("row-command", args);
}

</script>

<template>
  <el-container>
    <el-main style="min-height: 600px;">
      <el-scrollbar>
        <el-table :data="model.rows">
          <el-table-column v-for="col in columns" :prop="col.name" :label="col.title" :width="col.width"/>
          <el-table-column fixed="right" label="操 作" width="120">
            <template #default="rowScope">
              <el-button link type="primary" size="small" @click="handleRowCommand('detail', rowScope)">明 细</el-button>
              <el-button link type="primary" size="small" @click="handleRowCommand('edit', rowScope)">编 辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
    <el-footer>
      <el-pagination :current-page="model.pageIndex" :page-size="model.pageSize" :page-sizes="[10, 20, 40, 50, 100]"
        :small="small" :disabled="disabled" layout="prev, pager, next, total, sizes, jumper" :total="model.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-footer>
  </el-container>
</template>